<template>
  <div class="body">
    <el-row class="head">
      <el-col :span="24" class="head-tou">
        <el-row :gutter="10">
          <el-form
            :model="formData"
            :rules="rules"
            size="small "
            label-width="80px"
            label-position="right"
          >
            <el-col :span="8">
              <el-form-item label="搜索" prop="search">
                <el-input
                  v-model="formData.search"
                  placeholder="姓名、身份证、企业名称"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="创建日期:">
                <el-col :span="11">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    :value="formData.date1"
                    style="width: 100%"
                  ></el-date-picker>
                </el-col>
                <el-col :span="1">~</el-col>
                <el-col :span="11">
                  <el-time-picker
                    placeholder="选择时间"
                    :value="formData.date2"
                    style="width: 100%"
                  ></el-time-picker>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" size="small" @click="onSubmit"
                >查询</el-button
              >
            </el-col>
          </el-form>
        </el-row>
      </el-col>
      <el-col :span="24">
        <el-row>
          <el-col :span="24" class="head-main">
            <el-table
              :data="tableData"
              border
              stripe
              size="small "
              style="width: 100%"
            >
              <el-table-column
                align="center"
                fixed
                prop="companies"
                label="发布企业"
                width="250"
              >
              </el-table-column>
              <el-table-column align="center" prop="uname" label="任务名称">
              </el-table-column>
              <el-table-column align="center" prop="pick" label="接单人">
              </el-table-column>
              <el-table-column align="center" prop="card" label="身份证">
              </el-table-column>
              <el-table-column
                align="center"
                prop="phone"
                label="手机号"
                width="200"
              >
              </el-table-column>
              <el-table-column
                class="warn"
                align="center"
                prop="risk"
                label="风控预警"
              >
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24">
        <div class="page">
          <div class="page-left">
            <div>每页有10条数据,共1000条数据</div>
          </div>
          <div class="page-right">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        search: "",
        date1: "",
        date2: "",
      },
      rules: {},
      tableData: [
        {
          companies: "上海灵才科技有限公司",
          uname: "人力资源服务",
          pick: "孙常平2",
          card: "320113196509115644",
          phone: 18711917945,
          risk: "银行卡号与身份证,姓名信息不匹配验证不通过,身份信息或姓名输入不正确",
        },
        {
          companies: "上海灵才科技有限公司",
          uname: "人力资源服务",
          pick: "孙常平",
          card: "320113196509115644",
          phone: 15951961833,
          risk: "银行卡号与身份证,姓名信息不匹配验证不通过,身份信息或姓名输入不正确",
        },
        {
          companies: "上海灵才科技有限公司",
          uname: "人力资源服务",
          pick: "孙常平",
          card: "320113196509115644",
          phone: 15951961833,
          risk: "单笔不小于1.00元",
        },
        {
          companies: "上海灵才科技有限公司",
          uname: "WTA20200911451522",
          pick: "李丽",
          card: "131182198509098765",
          phone: 13123233434,
          risk: "银行卡号与身份证,姓名信息不匹配身份证号输入错误,身份证号不标准",
        },
        {
          companies: "上海灵才科技有限公司",
          uname: "测试2",
          pick: "李四",
          card: "410414198801134010",
          phone: 17713555140,
          risk: "单笔不小于1.00元",
        },
        {
          companies: "上海灵才科技有限公司",
          uname: "测试2",
          pick: "李四",
          card: "410414198801134010",
          phone: 17713555140,
          risk: "银行卡号与身份证,姓名信息不匹配身份证号输入错误,身份证号不标准",
        },
      ],
      tableArr: [],
      flag: true,
      //分页
      pagenum: 200,
      currentPage: 1,
    };
  },
  mounted() {
    // this.tableArr=this.tableData
    // var regular=/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    // var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
  },
  methods: {
    onSubmit() {
      this.tableData = this.tableData.filter((item) => {
        if (
          item.pick.indexOf(this.formData.search) >= 0 ||
          item.companies.indexOf(this.formData.search) >= 0 ||
          item.card.indexOf(this.formData.search) >= 0
        ) {
          return item;
        }
      });
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  background-color: rgb(248, 248, 248);
}
.head {
  margin: 0 20px 0 20px;
  /* border: 1px solid gray; */
  /* margin-top: 20px; */
  /* background-color: white; */
  /* height: 75px; */
}
.head-tou {
  margin-top: 20px;
  background-color: white;
  height: 75px;
  padding-top: 20px;
  border: 1px solid rgb(236, 237, 239);
  border-bottom: none;
}
.page {
  height: 90px;
  padding-top: 30px;
  background-color: white;
  border-top: none;
  border: 1px solid rgb(236, 237, 239);
  /* width: 5; */
}
::v-deep .el-table_1_column_6{
  color: red !important;
}
.page-left {
  float: left;
  color: grey;
  margin-left: 30px;
}
.page-right {
  float: right;
}
</style>
